<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式文件 -->
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />


</head>
<style>
    body {
        height: 200vh;
        overflow: scroll;
    }
    
    .page-pull-container {
        height: 50vh;
        background: pink;
        overflow: scroll;
    }
</style>

<body>
    <div id="app">
        <van-sticky>
            <van-dropdown-menu>
                <van-dropdown-item v-model="value" :options="option" />
                <van-dropdown-item title="筛选" ref="item">
                    <van-cell center title="包邮">
                        <template #right-icon>
                      <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
                    </template>
                    </van-cell>
                    <van-cell center title="团购">
                        <template #right-icon>
                      <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
                    </template>
                    </van-cell>
                    <div style="padding: 5px 16px;">
                        <van-button type="danger" block round @click="onConfirm">
                            确认
                        </van-button>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </van-sticky>
        <van-pull-refresh class='page-pull-container' success-text="刷新成功" v-model="isLoading" @refresh="onRefresh">
            {{count}}
            <div style="position:fixed;z-index:999">1111</div>
            app: name: "cws-user-web" version: "1.0.0" host: "localhost" mode: "debug" # debug | release port: 8000 targetService: service_name: "user-srv" consul: host: "localhost" port: 8500 wait: "15s" log: level: "debug" filename: "./logs/cwApp.log" max_size:
            200 max_age: 20 max_backups: 7 compress: true local_time: true mysql: host: "localhost" port: 3306 user: "root" password: "123" db_name: "cws-user" charset: "utf8mb4" parse_time: true max_open_connes: 200 # 用于设置最大打开的连接数，默认值为0表示不限制。 max_idle_connes:
            50 # 用于设置闲置的连接数。 redis: host: "localhost" port: 6379 db: 0 jwt: token_expire_duration: 2 #token过期时间，单位小时 secret: "cws-user-web" # jwt 密钥 issuer: "cws-user-web" # 签发人 emailService: from: "cunwangcodehope@qq.com" to: "cunwangcodehope@qq.com"
            Host: "smtp.qq.com" Port: 587 Username: "cunwangcodehope@qq.com" Password: "cdgjjpwgbmyafcff" CodeLen: 6 # 这里要和表单校验统一 form/email

        </van-pull-refresh>
    </div>
</body>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

<script>
    // 在 #app 标签下渲染一个按钮组件
    Vue.use(vant);

    let vm = new Vue({
        el: '#app',
        data: {
            count: 0,
            isLoading: false,
            value: 0,
            switch1: false,
            switch2: false,
            option: [{
                text: '全部商品',
                value: 0
            }, {
                text: '新款商品',
                value: 1
            }, {
                text: '活动商品',
                value: 2
            }, ],


        },
        methods: {
            onConfirm() {
                this.$refs.item.toggle();
            },
            onRefresh() {
                console.log(1)
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
        },
    })

    // 调用函数组件，弹出一个 Toast

    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
</script>

</html>